<template>
    <div class="context">
      <div class="classification">
          <h3>图书分类</h3>
          <h5>Jave EE</h5>
          <!-- <span style="word-wrap: break-word;">对对对是是是没错没错行行行好好</span> -->
          <h5>程序设计</h5>
          <!-- <span style="word-wrap: break-word;">对对对是是是没错没错行行行好好</span> -->
      </div>
      <div class="img">
        <img src="@/assets/logo.png">
      </div>
      <div class="recommendation">
        <h3>热门推荐</h3>
        <span style="word-wrap: break-word;">对对对是是是没错没错行行行好好</span>
      </div>
    </div>
</template>

<script>
    export default {
        name:'Context',
    }
</script>

<style>
  div.context {
    margin-top: 10px;
    height: auto;
  }
  div.classification,div.recommendation {
    border:1px solid ; 
    width: 14%;
    height: 20em;
    position: relative;
    text-align: center;
  }
  div.classification {
    display:inline-block;
    right: 2%;  
  }
  div.recommendation{
    display:inline;
    left: 2%;  
  }
div.img {
  position: relative;
  width: 45%;
  background-color: pink;
  display:inline;
}

</style>